<template>
    <div class="form">
        <div class="formTip">
            <van-image :src="img"></van-image>
            <p>请设置登录密码</p>
        </div>
        <van-field
            v-model="password"
            :type="type"
            placeholder="请输入登录密码" 
            :right-icon="typeIcon"
            @click-right-icon="changeType"
        >
        </van-field>
        <div class="my-button">
            <van-button :disabled="flag" color="#ff6666" block round @click="registerFn" >完成</van-button>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Field , Button , Image as VanImage ,Toast } from 'vant';
import { Register } from '../../api/user'

Vue.use(Field);
Vue.use(Button)
Vue.use(VanImage)

export default {
    data(){
        return{
            type:'password',
            typeIcon:'closed-eye',
            password:'',
            img:'',
        }
    },
    methods:{
        changeType(){
            this.type = this.type === 'password' ? 'text' : 'password'
            this.typeIcon = this.type === 'password' ? 'closed-eye' : 'eye-o'
        },
        registerFn(){
            Register({tel:localStorage.getItem('tel') , password:this.password}).then(res => {
                console.log(res);
                        // 注册成功，告诉用户直接登录
                Toast('注册成功')
                this.$router.go(-3)
            })
        }
    },
    computed: { 
        flag () {
            if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.password)) {
                return false
            } else {
                return true
            }
        }
    },
}
</script>

<style lang="stylus" scoped>
.form
    .formTip
        display: flex
        height: 200px
        flex-direction: column
        justify-content: center
        align-items: center
    .my-button
        margin-top: 30px
</style>